<template>
  <div class="gu-pir-box">
    <div class="title-box">
        <div class="name-box">
          热量及摄入比
        </div>
        <div class="tag-box">
            <span class="icon"><i style="color: #e70014;" class="iconfont icon-tubiao03"></i>偏高</span>

            <span class="icon"><i  style="color: #f8c049;" class="iconfont icon-tubiao04"></i>偏低</span>

            <span class="icon"><i  style="color: #24aa37;" class="iconfont icon-dagou"></i>正常</span>
        </div>
    </div>

    <div  v-if="heat_data!=null && heat_data.list.length>0">
      <div id="pirmain">
      </div>
    </div>

    <div class="table-box" v-if="heat_data!=null && heat_data.list.length>0">

      <!-- 标题名称 -->
      <div class="table-tr">
       <div class="table-flex">
         <div class="table-name">
           名称
         </div>
       </div>

       <div class="table-flex">
         <div class="table-name">
           摄入{{"(" +  heat_data.company + ")"}}
         </div>
       </div>

       <div class="table-flex">
         <div class="table-name">
           推荐{{"(" +  heat_data.company + ")"}}
         </div>
       </div>
      </div>
      <!--  标题名称结束 -->


      <!-- 热量数据 -->
      <div class="table-tr" v-for="(item,index) in heat_data.list">
       <div class="table-flex">
         <div class="table-name1">
           {{item.name}}
         </div>
       </div>

       <div class="table-flex">
         <div class="table-icon">
           <i v-show="item.status == 3" style="color: #e70014;" class="iconfont icon-tubiao03"></i>
           <i  v-show="item.status == 1"  style="color: #f8c049;" class="iconfont icon-tubiao04"></i>
           <i  v-show="item.status == 2" style="color: #24aa37;" class="iconfont icon-dagou"></i>
           {{item.value}}
         </div>
       </div>

       <div class="table-flex">
         <div class="table-rec">
            {{item.recommend}}
         </div>
       </div>
      </div>
       <!-- 热量数据 -->


      <!-- 总数据-->

      <div class="table-tr">
       <div class="table-flex" style="padding-bottom: 0px;padding-top: 10px;">
         <div class="table-name1">
           总摄入
         </div>
       </div>

       <div class="table-flex"  style="padding-bottom: 0px;padding-top: 10px;">
         <div class="table-icon">
           <i v-show="heat_data.total_heat.status == 3"   style="color: #e70014;" class="iconfont icon-tubiao03"></i>
           <i v-show="heat_data.total_heat.status == 1"  style="color: #f8c049;" class="iconfont icon-tubiao04"></i>
           <i v-show="heat_data.total_heat.status == 2"  style="color: #24aa37;" class="iconfont icon-dagou"></i>
           {{heat_data.total_heat.value}}
         </div>
       </div>

       <div class="table-flex"  style="padding-bottom: 0px;padding-top: 10px;">
         <div class="table-rec">
            {{heat_data.total_heat.recommend}}
         </div>
       </div>
      </div>
       <!-- 热量数据 -->

    </div>

  </div>
</template>

<script>
let echarts = require('echarts')
export default {
  data () {
    return {

    }
  },
  props:{
    heat_data:{
       type:Object,
       default:{}
    }
  },
  methods: {
    initECharts () {
     let  myChart   = echarts.init(document.getElementById('pirmain'));
     let data = this.heat_data.list

     if(data.length<=0){
       return false
     }

     let option = {
         backgroundColor: '#fff',
         tooltip: {
             show: true,
             trigger: 'item',
             formatter: "{b}: {c} ({d}%)"
         },

         series: [{
             type: 'pie',
             selectedMode: 'single',
             radius: ['20%', '58%'],
             color: [ '#7185fe', '#ff9fa0','#ffd173','#6fd0a3'],
             label: {
                 show: true,
                 position: 'outside',
                 normal: {
                     position: 'inner',
                     formatter: function(params) {
                      var percent = 0;
                      var total = 0;
                      for (var i = 0; i < data.length; i++) {
                          total += data[i].value
                      }
                      percent = Math.round((params.value / total) * 100);
                      if(params.name !== '') {
                          return percent + '%';
                      }else {
                          return '';
                      }
                    },
                     shadowBlur:10,
                     textStyle: {
                         color: '#fff',
                         fontWeight: 'bold',
                         fontSize: 12
                     }
                 }
             },

             data: data

         },
         {
             type: 'pie',
             selectedMode: 'single',
             radius: ['20%', '58%'],
             color: ['#86D560', '#AF89D6', '#59ADF3', '#FF999A'],
             label: {
                 show: true,
                 normal:{
                     color:"#666",
                     fontWeight:"bold",
                     fontSize:"12",
                 },

             },
              data: data
         }

         ]
     };
     myChart.setOption(option)
    }
  },
  mounted () {
    //this.initECharts()
  }
}

</script>

<style lang="stylus" scoped="scoped">
  .gu-pir-box{
    width:100%;
    background:#FFFFFF;
    .title-box{
      width:100%;
      padding:10px 16px 0 16px;
      box-sizing:border-box;
      .name-box{
        width:100%;
        padding-bottom:10px;
        line-height:1.2;
        font-size:14px;
        font-weight:bold;
        color:#000000;
      }
      .tag-box{
        width:100%;
        .icon{
          font-size:10px;
          padding-right:20px;
          color:#a3a6b9;
          .iconfont{
            font-size:10px;
          }
        }
      }
    }

    .table-box{
      width:100%;
      padding:0 24px 20px 24px;
      box-sizing:border-box;

      .table-tr{
        display:flex;
        justify-content:flex-start;
        align-items:center;

      }
      .table-flex{
        flex-grow:1;
        line-height:1.2;
        min-width:33%;
        max-width:33%;
        padding-bottom:16px;
        .table-name{
          color:#010101;
          font-size:12px;
          font-weight:bold;
        }

        .table-name1{
          color:#808080;
          font-size:12px;
        }
        .table-icon{
          color:#808080;
          font-size:12px;
          .iconfont{
            font-size:10px;
          }
        }
        .table-rec{
          color:#808080;
          font-size:12px;
        }
      }

      .table-flex:nth-of-type(3){
        text-align:right;
        .table-name{
          display:inline-block;
          min-width:60px;
          text-align:left;
        }
        .table-rec{
          display:inline-block;
          min-width:60px;
          text-align:left;
        }

      }

      .table-flex:nth-of-type(2){
        text-align:center;
        .table-name{
          display:inline-block;
          min-width:60px;
          text-align:left;
        }
        .table-icon{
          display:inline-block;
          min-width:60px;
          text-align:left;
        }
      }

      .table-flex:nth-of-type(1){
        text-align:left;
      }

    }

  }
  #pirmain{
    width:100%;
    height:220px;
  }
</style>
